<script setup lang="ts">
import { InformationCircleIcon } from '@heroicons/vue/24/outline'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
</script>

<template>
  <div class="min-h-screen">
    <div class="container mx-auto px-4 py-8">
      <h1 class="mb-4 text-4xl font-bold">{{ t('views.spaceGroups.title') }}</h1>
      <p class="mb-8 text-lg">230 {{ t('views.spaceGroups.count') }}</p>

      <div class="alert alert-info">
        <InformationCircleIcon class="h-6 w-6 shrink-0" />
        <span>{{ t('views.spaceGroups.description') }}</span>
      </div>
    </div>
  </div>
</template>
